<template>
  <div class="run-modal-style">
    <Form :model="modelForm" ref="modelTypeForm" :rules="rules" :label-width="120">
      <Row :gutter="32" class="code-row-bg">
        <Col span="24" style="border:none;">
          <Form-item :label="$t('module.modelList.modelTypeName')" prop="name">
            <Input
              :placeholder="$t('module.modelList.inputModelTypeName')"
              v-model="modelForm.name"
              
            ></Input>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="32" class="code-row-bg">
        <Col span="24" style="border:none;">
          <Form-item :label="$t('module.modelList.sort')" prop="sort">
            <InputNumber :min="0" :max="9999" v-model="modelForm.sort" style="width:100%"></InputNumber>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="32" class="code-row-bg">
        <Col span="24" style="border:none;">
          <Form-item :label="$t('module.modelList.remarks')" prop="productId">
            <Input
              placeholder
              type="textarea"
              v-model="modelForm.remarks"
              :autosize="{minRows: 2,maxRows: 5}"
              
            ></Input>
          </Form-item>
        </Col>
      </Row>
    </Form>
  </div>
</template>
<script>
import { updateModelType, addModelType } from '@api/flowable/modelList.js'

export default {
  name: 'ModelTypeEdit',
  props: {
    nodeData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      modelForm: {
        parentId: this.nodeData.parentId,
        name: this.nodeData.name,
        sort: this.nodeData.sort || 0,
        remarks: this.nodeData.remarks,
        id: this.nodeData.id
      },
      rules: {
        name: [{ required: true, message: this.$t('module.modelList.inputModelTypeName'), trigger: 'blur' }]
      },
      actions: [
        {
          text: this.$t('common.save'),
          theme: 'primary',
          handle: () => {
            this.save()
          },
          loading: false
        },
        {
          text: this.$t('common.close'),
          theme: 'primary',
          handle: () => {
            this.$emit('Close')
          }
        }
      ]
    }
  },
  created: function() {
    if (this.modelForm.id) {
      this.$emit('SetTitle', this.$t('common.edit') + this.$t('module.modelList.modelType'))
    } else {
      this.$emit('SetTitle', this.$t('common.create') + this.$t('module.modelList.modelType'))
    }

    this.$emit('SetPageWidth', 500)
    this.$emit('SetPageActions', this.actions)
  },
  methods: {
    save() {
      this.$refs['modelTypeForm'].validate(valid => {
        if (valid) {
          this.actions[0].loading = true
          if (this.modelForm.id) {
            updateModelType(this.modelForm).then(response => {
              this.$Message.success({
                content: this.$t('common.updateSuccess'),
                duration: 3
              })
              //关闭当前窗口
              this.$emit('Close', this.modelForm)
            })
          } else {
            addModelType(this.modelForm).then(response => {
              this.$Message.success({
                content: this.$t('common.createSuccess'),
                duration: 3
              })
              //刷新树
              //关闭当前窗口
              this.$emit('Close', response.data)
            })
          }
        } else {
          this.$Message.error({
            content: $t('common.formValidateFailed'),
            duration: 3
          })
        }
      })
    }
  }
  // watch: {},
  // directives: {}
}
</script>
